<template>
	<view class="search">
		<view class="input">
			<uni-search-bar class="uni-input" @confirm="search" :focus="true" v-model="keyword" @clear="clear">
			</uni-search-bar>
		</view>
		<view class="history" v-if="searchHistory.length != 0">
			<text>最近搜索</text>
			<uni-icons type="trash-filled" size="30" @click="clearHistory"></uni-icons>
		</view>
		<view class="historyTab">
			<view class="everyTab" v-for="i in searchHistory" :key="i.id" @click="searchTab(i.content)">{{i.content}}</view>
		</view>
		<view class="history">
			<text>热门搜索</text>
		</view>
		<view class="historyTab">
			<view class="everyTab" v-for="i in 9">内容</view>
		</view>
	</view>
</template>

<script setup>
import {onMounted, ref} from "vue"
import {request} from "../../utils/request.js"
let keyword = ref('')
let pageNum = ref(1)
let searchHistory = ref([])
onMounted(()=>{
	getSearchHistory()
})
//搜索
const search = () =>{
		uni.setStorageSync("searchHistory",searchHistory.value.concat([{id:searchHistory.value.length,content:keyword.value}]))
		searchHistory.value = uni.getStorageSync("searchHistory") || []
		uni.navigateTo({
			url:"/pages/class-list/class-list?type=search&keyword="+keyword.value
		})
		keyword.value = ""
}
//清除搜索
const cancel = () =>{
	keyword.value = ""
}
//获取搜索历史
const getSearchHistory = () =>{
	searchHistory.value = uni.getStorageSync("searchHistory") || []
}
//清空搜索历史
const clearHistory = () =>{
	uni.showModal({
		title:"确认清除搜索历史",
		success: () => {
			uni.setStorageSync("searchHistory",[])
			searchHistory.value = []
		}
	})
}
//点击标签搜索
const searchTab = (keyword) =>{
	uni.navigateTo({
		url:"/pages/class-list/class-list?type=search&keyword="+keyword
	})
}
</script>

<style lang="scss">
.search{
	padding: 30rpx;
	.input{
		.uni-input{
			width: 100%;
			border-radius: 12rpx;
			background-color: #F8F8F8;
		}
	}
	.history{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #888888;
		margin: 30rpx 0;
	}
	.historyTab{
		.everyTab{
			display: inline-block;
			background-color: #F8F8F8;
			padding: 27rpx;
			border-radius: 47rpx;
			white-space: nowrap;
			margin-right: 25rpx;
			margin-top: 10rpx;
		}
	}
	
}
</style>
